<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>个人主页</title>
		<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
		<link rel="stylesheet" href="swiper-4.5.0/dist/css/swiper.min.css">
		<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="css/style.css" />
		<meta name="viewport"
			  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	</head>
	<body>

		<div id="top" class="t">
			<i class="fa fa-chevron-up" aria-hidden="true"></i>
		</div>
		<header>
			<nav class="navbar navbar-expand-lg navbar-light" id="nav">
				<div class="container">
					<a class="navbar-brand left" href="#">L个人简介</a>
					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
						<i class="fa fa-bars" aria-hidden="true"></i>
					</button>

					<div class="collapse navbar-collapse" id="navbarSupportedContent">
						<ul class="navbar-nav ml-auto right">
							<li class="nav-item">
								<a class="nav-link active" href="javascript:void(0)">我的主页 <span class="sr-only">(current)</span></a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="javascript:void(0)">个人简介 <span class="sr-only">(current)</span></a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="javascript:void(0)">项目展示 <span class="sr-only">(current)</span></a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="javascript:void(0)">课堂练习 <span class="sr-only">(current)</span></a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="javascript:void(0)">学习内容 <span class="sr-only">(current)</span></a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="javascript:void(0)">联系方式 <span class="sr-only">(current)</span></a>
							</li>

						</ul>

					</div>
				</div>
			</nav>

		<div class="nei">
			<div class="container">
				<h1>
					L的博客 & L的简介
				</h1>
				<div class="row">
					<div class="col-md-4"></div>
					<div class="col-md-4 text-center">
						<a href="#one">了解这个小可爱</a>
					</div>
					<div class="col-md-4"></div>
				</div>
			</div>
		</div>
	</header>
		<main>
			<div class="container">
				<div class="row introduce" id="one">
					<div class="col-md-5 text-center Personal clearfix">
						<h3>个人简介</h3>
						<img src="images/timg.jpg" alt="">
						<ul class="clearfix">
							<li class="li-left">
								<p>姓名：梁雨</p>
								<p>年龄：20</p>
								<p>性别：女</p>
							</li>
							<li class="li-right">
								<p>电话：151-0074-0306</p>
								<p>邮箱：1006421764@qq.com</p>
								<p>住址：河北省沧州市泊头市</p>
							</li>
						</ul>
					</div>
					<div class="col-md-1"></div>
					<div class="col-md-6 About_me">
						<h3>关于我</h3>
						<img src="images/work-4.jpg" alt="">
						<p>本人性格热情开朗，待人友好，为人诚实谦虚。工作勤奋，认真负责，能吃苦耐劳，尽职尽责，有耐心。具有亲和力，平易近人，善于与人沟通。
						<br>愿与公司一起进步。</p>
					</div>
				</div>


			</div>

			<div class="display" id="two">
				<div class="container">
					<h3>项目展示</h3>
					<div class="bd-example">
						<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
							
							<div class="carousel-inner">
								<div class="carousel-item active">
									<a href="http://byy1006.gitee.io/erqidabianhaierguanwang" target="view_windows">
										<img src="images/haier.PNG" class="d-block w-100" alt="">
									</a>
									<div class="carousel-caption d-none d-md-block">
										<h2>海尔官网</h2>
										<p>海尔智慧家庭是利用物联网、人工智能、大数据，通过U+开放物联平台，把传统电器变为智慧网器，实现场景互联，结合生态服务，为用户提供全流程、全场景解决方案，打造最佳智慧生活体验</p>
									</div>
								</div>
								<div class="carousel-item">
									<a href="http://byy1006.gitee.io/tengxunxinwen"  target="view_windows"><img src="images/tengxun.PNG" class="d-block w-100" alt="..."></a>
									<div class="carousel-caption d-none d-md-block">
										<h2>腾讯网</h2>
										<p>腾讯网从2003年创立至今,已经成为集新闻信息,区域垂直生活服务、社会化媒体资讯和产品为一体的互联网媒体平台。</p>
									</div>
								</div>
								<div class="carousel-item">
									<a href="http://byy1006.gitee.io/tianya_mingyue_knife"><img src="images/tianya.PNG" class="d-block w-100" alt="..."></a>
									<div class="carousel-caption d-none d-md-block">
										<h2>天涯明月刀</h2>
										<p>《天涯明月刀》是腾讯北极光工作室研发的一款武侠题材的3D大型多人在线角色扮演电脑客户端游戏。</p>
									</div>
								</div>
								<div class="carousel-item">
									<a href="http://byy1006.gitee.io/online_translation_exercises" target="view_windows"><img src="images/zaixian.PNG" class="d-block w-100" alt="" ></a>
									<div class="carousel-caption d-none d-md-block">
										<h2>在线翻译</h2>
										<p>英语翻译,中英互译,英汉互译、常用翻译工具来进行语言翻译,支持要翻译的文字内容或者英文内容.</p>
									</div>
								</div>
							</div>
							<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
								<i class="fa fa-chevron-left" aria-hidden="true"></i>
								<span class="sr-only">Previous</span>
							</a>
							<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
								<i class="fa fa-chevron-right" aria-hidden="true"></i>
								<span class="sr-only">Next</span>
							</a>
						</div>
					</div>
				</div>
			</div>

			<div class="Practice" id="three">
				<div class="container">
					<h3>课堂练习</h3>
					<div class="row">
						<div class="col-md-3">
							<div class="hai">
								<a href="" class="four">D</a>
								<a href="http://byy1006.gitee.io/duitangwangye" target="view_window">
									<div class="er">
										<p>
											<span>堆糖：</span>
											<br>运用html5,css3,javascript等
										</p>
									</div>
								</a>
							</div>
						</div>
						<div class="col-md-3">
							<div class="tian">
								<a href="" class="four">T</a>
								<a href="http://byy1006.gitee.io/tianqi" target="view_window">
									<div class="qi">
									<p>
										<span>天气Api：</span>
										<br>运用vue.js,json数据等
									</p>
									</div>
								</a>
							</div>

						</div>
						<div class="col-md-3">
							<div class="teng">
								<a href="" class="four">T</a>
								<a href="http://byy1006.gitee.io/themes_website " target="view_window">
									<div class="xun">
										<p>
											<span>thems：</span>
											<br>主要运用bootstrap.
										</p>
									</div>
								</a>
							</div>

						</div>
						<div class="col-md-3">
							<div class="fan">
								<a href="" class="four">U</a>
								<a href="http://byy1006.gitee.io/ui_login_page" target="view_window">
									<div class="yi">
										<p>
											<span>UI登录页：</span>
											<br>主要运用flex布局等.
										</p>
									</div>
								</a>
							</div>

						</div>
					</div>
				</div>
			</div>

			<div class="study" id="four">
				<div class="container">
					<h3>我们所学的</h3>
					<div class="swiper-container">
						<div class="swiper-wrapper">
							<div class="swiper-slide">
								<div class="card" style="width: 18rem;">
									<div class="toutou">
										<p>Html/5</p>
									</div>
									<div class="card-body">
										<p class="card-text">
											HTML称为超文本标记语言，是一种标识性的语言.
											<br>
											HTML5是构建Web内容的一种语言描述方式.
										</p>
									</div>
								</div>
							</div>
							<div class="swiper-slide">
								<div class="card" style="width: 18rem;">
									<div class="toutou">
										<p>Css/3</p>
									</div>
									<div class="card-body">
										<p class="card-text">
											层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言.
											<br>
											CSS3是CSS（层叠样式表）技术的升级版本.
										</p>
									</div>
								</div>
							</div>
							<div class="swiper-slide">
								<div class="card" style="width: 18rem;">
									<div class="toutou">
										<p>javascript</p>
									</div>
									<div class="card-body">
										<p class="card-text">JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型.</p>
									</div>
								</div>
							</div>
							<div class="swiper-slide">
								<div class="card" style="width: 18rem;">
									<div class="toutou">
										<p>ajax</p>
									</div>
									<div class="card-body">
										<p class="card-text">Ajax 是指一种创建交互式网页应用的网页开发技术.
											<br>
											Ajax 是一种用于创建快速动态网页的技术.</p>
									</div>
								</div>
							</div>
							<div class="swiper-slide">
								<div class="card" style="width: 18rem;">
									<div class="toutou">
										<p>vue.js</p>
									</div>
									<div class="card-body">
										<p class="card-text">Vue 是一套用于构建用户界面的渐进式JavaScript框架.</p>
									</div>
								</div>
							</div>
							<div class="swiper-slide">
								<div class="card" style="width: 18rem;">
									<div class="toutou">
										<p>响应式</p>
									</div>
									<div class="card-body">
										<p class="card-text">就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.</p>
									</div>
								</div>
							</div>
						</div>
						<!-- Add Pagination -->
						<div class="swiper-pagination"></div>
					</div>
				</div>
			</div>
		</main>
		<footer id="five">
			<div class="container">
				<h3>联系我</h3>
				<div class="row text-center">
					<div class="col-md-4">
						<div class="wx">
							<a href="" class="weixin">
								<img src="images/wx.jpg" alt="" class="tupian">
								<img src="images/wxewm.jpg" alt="" class="erweima">
							</a>

						</div>
					</div>
					<div class="col-md-4">
						<div class="qq">
							<a href="" class="QQ">
								<img src="images/qq.png" alt="" class="tupian">
								<img src="images/qqewm.png" alt="" class="erweima">
							</a>

						</div>
					</div>
					<div class="col-md-4">
						<div class="wb">
							<a href="" class="weibo">
								<img src="images/wb.jpg" alt="" class="tupian">
								<img src="images/wbewm.jpg" alt="" class="erweima">
							</a>

						</div>
					</div>
				</div>
				<div class="fjx"></div>

			</div>
			<p>相信我，你不会后悔！<br>联系电话：15100740306</p>
		</footer>













	<script src="swiper-4.5.0/dist/js/swiper.min.js"></script>
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
		<script src="https://cdn.bootcss.com/popper.js/1.14.7/umb/popper.min.js"></script>
		<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<script src="js/script.js"></script>

	<script>
		var swiper = new Swiper('.swiper-container', {
			slidesPerView: 3,
			spaceBetween: 30,
			centeredSlides: true,
			loop: true,

			pagination: {
				el: '.swiper-pagination',
				type: 'progressbar',
			},
		});

	</script>
	</body>
</html>
